<template>
<div>

<!--  模态框-->
  <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
    <!-- 内容 -->
    <div>
      <el-col :span="15">  <el-input v-model="searchData" placeholder="案号搜索"></el-input></el-col>
      <el-select v-model="select" filterable placeholder="请选择">
        <el-option label="委托人搜索" value="1"></el-option>
        <el-option label="对方当事人搜索" value="2"></el-option>
        <el-option label="案号搜索" value="3"></el-option>
        <el-option label="案由搜索" value="4"></el-option>
        <el-option label="归档号搜索" value="5"></el-option>
        <el-option label="受理机关搜索" value="6"></el-option>
        <el-option label="受理法院搜索" value="7"></el-option>
      </el-select>
      <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>
    </div>
    <div>
      <el-table
          :data="anjianANDnoshow"
          style="width: 100%"
      >
        <el-table-column
            prop="caseNo"
            label="选择"
            width="180">
          <template  slot-scope="scope"  >
            <el-button type="success" icon="el-icon-check" circle @click="to(scope.$index, scope.row)" ></el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="caseNo"
            label="案号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="caseWtr"
            label="委托人">
        </el-table-column>
        <el-table-column
            prop="caseOppositeParties"
            label="对方当事人">
        </el-table-column>
        <el-table-column
            prop="caseAttorney"
            label="承办律师">

        </el-table-column>
        <el-table-column
            prop="collectionTime"
            label="收案日期">
        </el-table-column>

        <!--结束-->


        <!--结束-->
      </el-table>
      <!--分页-->
      <!-- 分页组件 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1,5, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--分页结束-->
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>

      </span>
  </el-dialog>

  <!--  模态框结束-->


  <el-row>
    <el-col :span="2.5">
      <b>|代开发票</b>
    </el-col>
  </el-row>
  <hr>
<!--表单-->
  <el-form :inline="true"   :ref="tabledata" :model="tabledata"  :rules="rules"  class="demo-form-inline">
    <el-row>
    <el-col :span="10">
    <el-form-item label="案件:" prop="anjian">
 <el-input
          placeholder="选择案件"
          v-model="tabledata.anjian" >
        <i slot="prefix" class="el-input__icon el-icon-search"  @click="dialogVisible = true"></i>
      </el-input>
<!--      隐藏的案件id-->
<el-input v-show="false" v-model="tabledata.caseLawId"></el-input>
    </el-form-item>
    </el-col>


    <el-col :span="10">
    <el-form-item label="申请人:">
      <el-input  placeholder="申请人" readonly v-model="shenqingren"></el-input>
  </el-form-item>
    </el-col>
    </el-row>
    <el-row>
    <el-col :span="10">
      <el-form-item label="委托人:">
   <template>
     <span >{{weituoren}}</span>
   </template>
      </el-form-item>
    </el-col>
      <el-col :span="10">
        <el-form-item label="案由:">
          <template>
            <span >{{anyou}}</span>
          </template>
        </el-form-item>
      </el-col>
    </el-row>



    <el-row>
      <el-col :span="10">
        <el-form-item label="代理费:">
          <template>
            <span >{{dailifei}}元</span>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="已到款项:">
          <template>
            <span >{{yidaokuanxiang}}元(已经收到的款)</span>
          </template>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="10">
        <el-form-item label="已开发票:">
          <template>
            <span >{{yikaifapiao}}元(已经开过的发票)</span>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="办案律师:">
          <template>
            <span >{{bananlvshi}}</span>
          </template>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="申请日期:" >
          <el-input v-model="tabledata.cwApplicationDate" readonly></el-input>
        </el-form-item>
      </el-col>

    </el-row>


<!--提交数据-->
    <el-row>
      <el-col :span="10">
        <el-form-item label="发票抬头:" >
          <el-input v-model="tabledata.cwInvoiceTitle" readonly></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="开票金额:" prop="cwInvoiceMoney">
            <el-input v-model.number="tabledata.cwInvoiceMoney" ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="开票项目:" prop="cwInvoiceItem">
            <el-select v-model="tabledata.cwInvoiceItem" placeholder="--请选择--">
<el-option  v-for="(item,index) in fapiaoxiangmu" :key="index" :label="item.typeName" :value="item.id"></el-option>

            </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="开具类型:" prop="cwOpenType">
          <el-select v-model="tabledata.cwOpenType" placeholder="--请选择--">
            <el-option  label="企业" value="1"></el-option>
            <el-option  label="个人" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>




    <el-row>
      <el-col :span="10">
        <el-form-item label="发票类型:" prop="cwInvoiceType">
          <el-select v-model="tabledata.cwInvoiceType" placeholder="--请选择--">
            <el-option  label="增值税专用发票" value="1"></el-option>
            <el-option  label="增值税普通发票" value="2"></el-option>
            <el-option  label="通用机打发票" value="3"></el-option>

          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="纳税人识别号:" prop="cwTaxpayerIdentityNumber">
 <el-input v-model="tabledata.cwTaxpayerIdentityNumber" placeholder="请输入"></el-input>
 </el-form-item>
      </el-col>
    </el-row>




    <el-row>
      <el-col :span="10">
        <el-form-item label="发票号:" prop="cwInvoiceNumber">
          <el-input v-model="tabledata.cwInvoiceNumber" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="开票日期:">
          <el-input v-model="tabledata.cwInvoiceDate" :readonly="true"></el-input>
        </el-form-item>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="2.5">
        <b>|其他选填</b>
      </el-col>
      <el-col :span="3">
        <el-button size="mini" @click="qitaxuantian">{{butshowtext}}</el-button>
      </el-col>
    </el-row>
    <hr>

<!--    其他选填-->
    <div v-show="zhuangtai">
    <el-row>
      <el-col :span="10">
        <el-form-item label="税务登记证副本复印件:">
          <el-upload
              class="upload-demo"

              action=""
              :http-request="submitUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              list-type="picture-card"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <el-input  v-model="tabledata.recordFileId"  v-show="false" ></el-input>
            <div slot="tip" class="el-upl oad__tip">只能上传jpg/png文件，且不超过500kb
           </div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="基本户开户银行:">
          <el-input v-model="tabledata.cwBasicBankofdeposit" ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="基本户开户账号:">
            <el-input v-model="tabledata.cwAccountNumber" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="注册场地地址:">
            <el-input v-model="tabledata.cwRegisteredAddress" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="注册固定电话:">
            <el-input v-model="tabledata.cwFixedlineTelephone" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row>
    <el-form-item label="申请备注:">
            <el-input  type="textarea" cols="90"  rows="3" v-model="tabledata.cwApplicationRemark" ></el-input>
          </el-form-item>

      </el-row>
      <el-row>
        <el-form-item label="开票备注:">
          <el-input  type="textarea" cols="90"  rows="3" v-model="tabledata.cwInvoiceRemark" ></el-input>
        </el-form-item>

      </el-row>



    </div>
    <!-- 选填结束-->


    <el-col :span="10">
    <el-form-item>
      <el-button type="primary" @click="onSubmit(tabledata)">确认提交</el-button>
    </el-form-item>
    </el-col>






  </el-form>

</div>
</template>

<script>
//当前登陆者员工id
//
export default {
  name: "CwInvoice",
  data() {
    return {
      files: "", fileName: "",fileList:[], //文件上传
      searchData: "",//名称 进行高级查询
      select: "",//可选的搜索
      //登录者的id
      empid: JSON.parse(localStorage["user"])[0].hrEmpId,
      //只显示  不用传递的参数
      shenqingren: "",  //申请人
      weituoren: "",//委托人
      anyou: "",//案由
      dailifei: "",//代理费
      yidaokuanxiang: "",//已到款项
      yikaifapiao: "",//已开发票
      bananlvshi: "",//办案律师
      //传入后台可添加的数据
      tabledata: {
        //不传入 但通过form表单
        anjian: "",  //案件名称
        //传入后端的
        cwInvoiceTitle: "",//发票抬头
        cwInvoiceMoney: "",//开票金额
        cwApplicationDate: "",   //申请日期
        cwInvoiceDate: "",//开票日期
        cwInvoiceStatus: "N",//开票状态
        cwInvoiceNumber: "",//发票号
        cwOpenType: "",//开具类型
        cwInvoiceType: "",//发票类型
        cwInvoiceItem: "",//开票项目
        cwTaxpayerIdentityNumber: "",//纳税人识别号
        cwBasicBankofdeposit: "",//基本户开户银行
        cwRegisteredAddress: "",//注册场地地址
        cwFixedlineTelephone: "",//注册固定电话
        recordFileId: "",//税务登记证副本
        caseLawId: "", //案件id
        cwApplicationRemark: "", //申请备注
        cwInvoiceRemark: "",//开票备注
        cwAccountNumber: "",//基本户开户账号
      },
      //存放cw_fapiao_type表的数据
      fapiaoxiangmu: [],
      //案件 以及不显示的数据
      anjianANDnoshow: [],
      total: 0,
      currentPage: 1, //初始页
      pageSize: 1,
      dialogVisible: false,   //模态框
      butshowtext: "展开",//按钮的显示名字,
      zhuangtai: false, //  信息是否隐藏的状态
      //表单验证
      rules:{

        cwInvoiceMoney:[
          { required: true, message: '金额不能为空', trigger: 'blur' },
          { type: 'number', message: '金额必须为数字值', trigger: 'blur' }
    ],
        anjian:[  //案件
          { required: true, message: '案件不能为空', trigger: 'change' }
        ],
        cwInvoiceItem:[//开票项目
        { required: true, message: '开票项目不能为空', trigger: 'blur' }
      ],
        cwOpenType:[//开具类型
          { required: true, message: '开具类型不能为空', trigger: 'blur' }
        ]
        ,
        cwInvoiceType:[//发票类型
          { required: true, message: '发票类型不能为空', trigger: 'blur' }
        ]
        ,
        cwTaxpayerIdentityNumber:[//纳税人识别号
          { required: true, message: '纳税人识别号不能为空', trigger: 'blur' }
        ]  ,
        cwInvoiceNumber:[//发票号
          { required: true, message: '发票号不能为空', trigger: 'blur' }
        ]

    }

    }

  },
  methods: {
    //提交
    onSubmit(tabledata){
      this.$refs[tabledata].validate((valid) => {
        if (valid) {
          //校验通过后的操作
          this.$http.post("/cwInvoice", this.tabledata).then(res => {
            console.log(res)
            alert("添加成功! 跳转至查看页面 ");
            this.$router.push({name: 'cwinvoiceget', query: {id: res.data.data}})
          })
        } else {
          alert("验证错误")
        }
      })
      },
    //渲染cw_fapiao_type表的数据  开票项目
    cwfapiao() {
      this.$http.get('/cwFapiaoType')
          .then(res => {
            //数据放入fapiaoxiangmu 数组里面
            this.fapiaoxiangmu = res.data.data
          })
    },
    //渲染所有数据
    //获取当前日期
    newdate() {
      var d = new Date(),
          // eslint-disable-next-line no-unused-vars
          str = '';
      str += d.getFullYear() + '-'; //获取当前年份
      str += d.getMonth() + 1 + '-'; //获取当前月份（0——11）
      str += d.getDate();
      //交给开票日期
      this.tabledata.cwInvoiceDate = str;
    }
    ,
    //通过当前登陆者的员工id渲染  只显示  不用传递的数据
    empidGEREN() {
      this.$http.get('/caseLaw', {
        params: {
          "hrEmpId": this.empid, "searchData": this.searchData
          , "select": this.select, currentPage: this.currentPage, //初始页
          pageSize: this.pageSize,   //    每页的数据
            id:this.$route.params.id===undefined?"":this.$route.params.id,//案件id
        }
      }).then(res => {
        this.anjianANDnoshow = res.data.data.list;
        this.total=res.data.data.total
      })
    },
    // 案件模态框的高级查询
    gaojijiansuo() {
      this.empidGEREN();
    },
    //案件模态框 点击右上角的x按钮触发
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(res => {
            done();
            console.log(res)
          })
          .catch(res => {
            console.log(res);
          });
    },
    //分页
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pageSize = size;
      console.log(this.pageSize)  //每页下拉显示数据
      this.empidGEREN()
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
      this.empidGEREN()
    },
    //点击勾选案件后触发
    to(index, row) {
      //id交给 要传送的对象的案件id
      this.tabledata.caseLawId = row.id
      //显示但不传送的值   案件名称
      this.tabledata.anjian = row.caseNo
      //  alert(row.caseNo +"\t\t"+row.id)
      //关闭模态框
      this.dialogVisible = false
      //把这一行的数据的  提交人拿到 交给 显示但不传送的申请人
      this.shenqingren = row.caseSubmitter;
      this.weituoren = row.caseWtr;//委托人
      this.anyou = row.caseCause//案由
      this.dailifei = row.caseAgencyfee//代理费
      this.yidaokuanxiang = row.casePaidsal//已到款项
      this.yikaifapiao = row.caseInvoiced//已开发票
      this.bananlvshi = row.caseAttorney//办案律师
      //可传送的数据
      this.tabledata.cwInvoiceTitle = row.caseWtr;//委托人

      //拿到案件id  去查询  case_decrease费用减免表的申请日期
this.$http.get("caseDecrease/id/case_decrease", {params: {"caseLawId": this.tabledata.caseLawId}})
            .then(res => {
              this.tabledata.cwApplicationDate = res.data.data[0].applyDate
            })

    },        //文件上传
    beforeUpload(file) {//文件上传之前
      this.files = file;
      this.fileName = file.name;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      console.log(fileList);
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    //提交文件
    submitUpload() {
      if (this.files.size / 1024 > 500) {
        this.$message.error('错误提示：请上传小于500kb的文件')
        return false
      }
      let fileFormData = new FormData();
      fileFormData.append('file', this.files,this.fileName);//file是键，files是值，就是要传的文件，fileName是要传的文件名
      let requestConfig = {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
      };
      this.$http.post("/file", fileFormData, requestConfig)
          .then(res => {
            this.tabledata.recordFileId = res.data.data
          })
    },
    //文件上传结束
    //点击展开 收回按钮后
    qitaxuantian() {
      if (this.zhuangtai == false) {
        this.butshowtext = "收回"
        this.zhuangtai = true
      } else {
        this.butshowtext = "展开"
        this.zhuangtai = false
      }

    }


  }, created() {  //出生时干的事
    //调用 cwfapiao方法 查询所有的 开票项目
    this.cwfapiao();
    //调用方法获取当前日期
    this.newdate();
    //调用empidGEREN  执行这个方法 获取显示 不传递的数据
    this.empidGEREN();
  },

}
</script>

<style scoped>

</style>